<template>
	<view>
		<view class="order_info mt20 mb20 ">
			<p>订单编号：{{ order.order_number }}</p>
			<p>下单时间：{{ order.create_time }}</p>
		</view>
		
		<view class="express-bar"></view>
		<uni-list>
			<uni-list-item  :show-arrow="false"
			:show-extra-icon="true" :extra-icon="{ color: '#919191', size: '20', type: 'map-pin-ellipse' }"
			:title="order.shipping_name + ' ' + order.shipping_tel" :note="order.shipping_province + '' + order.shipping_city + order.shipping_county + order.shipping_address_detail"></uni-list-item>
		</uni-list>	
		<view class="express-bar"></view>
 
<view class="mt20 mb20">
		<my-card		
			v-for="(goods, goodsI) in order.orderItems"			
			:idid="goodsI"
			:title="goods.title"
			:quantity="goods.quantity"
			:price="goods.price"
			:thumb="goods.image"
		></my-card>
	</view>	
	
		
		<view class="mb20">
	
		<uni-list>
			<uni-list-item title="商品应付款" :show-arrow="false">
				<template v-slot:right="">{{'￥' + (order.total / 1 ).toFixed(2)}}</template>
			</uni-list-item>
			<uni-list-item title="运费" :show-arrow="false">
				<template v-slot:right="">{{'￥' + order.shipping_fee}}</template>
			</uni-list-item>
			<uni-list-item title="实付款" :show-arrow="false">
				<template v-slot:right="">{{'￥' + (order.total / 1 + order.shipping_fee / 1).toFixed(2)}}</template>
			</uni-list-item>
		</uni-list>
		</view>	
		
		<view style="margin-bottom: 200rpx;">
			 	
				<view class="my-cell">
					<view class="title">订单记录</view>
				</view>
				
				<view class="order_info">
					
					<view v-for="(history, index) in order.orderHistory" :key="index">{{ history.create_time }} {{ history.remark }}</view>
					
				</view>
			
			
		</view>
 
	</view>
</template>

<script>
	
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import myCard from '@/components/my-card/my-card.vue';
	
export default {
	
	components: {
		uniList,
		uniListItem,
		myCard
		 
	},
	
	data() {
		return {
			order : {
				orderItems: [],
				orderHistory: []
			}
		};
	},
	onLoad(option) {
		this.loadItems(option.order_id);
	},
	methods: {
		loadItems(order_id) {
			this.$http.post('/shop.order/read', { order_id: order_id }).then(res => {
				this.order = res.data.data;
			});
		}
	}
};
</script>

<style lang="scss">

.order_info {
	color: #323233;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	line-height: 2;
	font-size: 28rpx;	
}
.express-bar {
	height: 10rpx;
	background: url('~@/static/express.png') left center repeat-x #ffffff;
}
</style>
